

import React, { Component } from 'react';
import './login.css';
import { Form, Input, Button, Select, message } from 'antd';
import { Link } from 'react-router-dom';
import { reqSignin, reqOrganListNoToken } from '../../api';
import userIcon from '../../assets/image/user.png'
import passwordIcon from '../../assets/image/password.png'
import phoneIcon from '../../assets/image/phone.png'
import emailIcon from '../../assets/image/email.png'
import organizationIcon from '../../assets/image/organization.png'
const { Option } = Select;

class SignIn extends Component {
  state = {
    organArray: []
  }

  handleOnFinish = async (values) => {
    const { org_id, user_email, user_mobile, user_name, user_password } = values;
    //console.log("注册参数",org_id,user_email,user_mobile,user_name,user_password);
    const result = await reqSignin(org_id, user_email, user_mobile, user_name, user_password);
    console.log("注册", result);
    if (result.code === 200) {
      message.success('注册请求已发送，等待管理员审批！');
      this.props.history.replace('/login');
    } else {
      message.error(result.data);
    }
  };

  getOrganList = async () => {  // 获取全部组织,注册时无token！！  
    const result = await reqOrganListNoToken();
    console.log("无token获取组织", result);
    if (result.code === 200) {
      const organInforList = result.data;
      var organArray = Object.keys(organInforList).map(function (el) {
        return organInforList[el];
      })
      this.setState({
        organArray
      })
    }
  }

  componentDidMount() {
    this.getOrganList();
  }

  render() {
    return (
      <div className="login">
        <section className="login-content">
          <p className='login-title'>
            矿井钻孔分析仪数据处理软件
          </p>
          <div className="account-login account-signin" style={{ height: 577 }}>
            <div className="text-box">
              <h1>注册账号</h1>
            </div>
            <div className="form-login-box form-signin-box">
              <Form
                name="normal_login"
                className="login-form"
                autocomplete="off"
                initialValues={{
                  remember: true,
                }}
                onFinish={this.handleOnFinish}
              >
                <Form.Item
                  name="user_mobile"
                  rules={[
                    {
                      required: true,
                      message: '请输入您的手机号码！',
                    }, {
                      min: 11,
                      message: '手机号码无效',
                    }, {
                      max: 11,
                      message: '手机号码无效',
                    }
                  ]}
                >
                  <Input prefix={<div style={{ display: 'flex', alignItems: 'center' }}><img src={phoneIcon} alt='' /><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>} placeholder=" 请输入您的手机号码" />
                </Form.Item>

                <Form.Item
                  name="user_name"
                  rules={[
                    {
                      required: true,
                      message: '请输入用户名称!',
                    }, {
                      min: 2,
                      message: '用户名必须大于等于2位',
                    }, {
                      max: 5,
                      message: '用户名必须小于等于5位',
                    }
                  ]}
                >
                  <Input prefix={<div style={{ display: 'flex', alignItems: 'center' }}><img src={userIcon} alt='' /><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>} placeholder=" 请输入用户名称" />
                </Form.Item>

                <Form.Item
                  name="org_id"
                  rules={[
                    {
                      required: true,
                      message: '请选择您的组织！'
                    }
                  ]}>

                  <div className='signin-select'>
                    <div style={{ display: 'flex', alignItems: 'center' }}><img src={organizationIcon} alt='' width={14}/><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>
                    <Select
                      placeholder="请选择您所属的组织"
                      allowClear
                      style={{ flex: 1 }}
                    >
                      {this.state.organArray.map((item) => <Option value={item.org_id}>{item.org_name}</Option>)}
                    </Select>
                  </div>

                </Form.Item>

                <Form.Item
                  name="user_email"
                  rules={[
                    {
                      type: 'email',
                      message: 'E-mail无效!',
                    },
                    {
                      required: true,
                      message: '请输入您的E-mail!',
                    },
                  ]}
                >
                  <Input prefix={<div style={{ display: 'flex', alignItems: 'center' }}><img src={emailIcon} alt='' /><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>} placeholder=" 请输入您的E-mail" />
                </Form.Item>

                <Form.Item
                  name="user_password"
                  hasFeedback
                  rules={[
                    {
                      required: true,
                      message: '请输入登录密码!',
                    }, {
                      min: 6,
                      message: '密码必须大于等于6位'
                    }, {
                      max: 12,
                      message: '密码必须小于等于12位'
                    }, {
                      pattern: /^[a-zA-Z0-9_]+$/,  // pattern正则表达式匹配
                      message: '密码由是字母、数字或下划线组成',
                    }
                  ]}
                >
                  <Input
                    prefix={<div style={{ display: 'flex', alignItems: 'center' }}><img src={passwordIcon} alt='' /><div style={{ width: 1, height: 16, background: '#35DBFF', margin: '0 10px 0 15px' }}></div></div>}
                    type="password"
                    placeholder=" 请输入登录密码"
                  />
                </Form.Item>

                <Form.Item style={{ marginBottom: 0 }}>
                  <Button type="primary" htmlType="submit" className="login-form-button" style={{ marginTop: 10, marginBottom: 10 }}>
                    注册
                  </Button>
                </Form.Item>
                <Link className="return-login" to="/login">已有账号，立即登录</Link>
              </Form>
            </div>

          </div>
        </section>
      </div>

    )
  }
};

export default SignIn;